import Vue from "vue";
import Vuex from "vuex";

// 安装插件
Vue.use(Vuex);

// 生成对象
const store = new Vuex.Store({
  // 核心成员1: state 储存共享数据 可以给所有组件使用
  // 1.直接访问 this.$store.state.count
  // 2.辅助函数:
  //   a. 按需导入辅助函数
  //   b. 使用辅助函数在 computed 处展开
  state: {
    count: 101,
    list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
  },
  // 核心成员2: mutations 修改state的数据
  mutations: {
    // mutations 里的函数都有参数
    // 参数1: 永远都是 state
    incremCount(state) {
      state.count++;
    },
    // 参数1: state
    // 参数2: 传入的数据
    changeCount(state, num) {
      state.count = num;
    },
    // 辅助函数 mapMutations 的用法:
    // 1. 按需导入辅助函数
    // 2. 使用辅助函数，在 methods 处展开
    // 辅助函数一般在组件内需要多次调用方法时，才会使用
  },
  // 核心成员3: actions
  actions: {
    // 在 actions 中不能直接操作 state
    // 而是要交给 mutations 操作 state
    // 参数1: context 是 Store 的对象（上下文对象），可以调用 commit 来触发 mutations
    asyncIncrem(context) {
      setTimeout(() => {
        context.commit("incremCount");
      }, 1000);
    },
    asyncChangeCount(context, num) {
      setTimeout(() => {
        context.commit("changeCount", num);
      }, 1000);
    },
  },
  getters: {
    // 相当于 Vuex 中的计算属性
    // 这个计算属性只能是函数，只能提供数据访问，不能修改数据
    // 参数1: state
    // 辅助函数 方法同上
    arr(state) {
      return state.list.filter((item) => item > 5);
    },
  },
});

export default store;
